﻿<script>
    layui.link(swui.path + 'css/theme.css');
</script>

<div class="swui-tab" style="height:100%">
    <div class="swui-tab-left">
        <div class="swui-tab-title">个性化</div>
        <div class="swui-scroll-y swui-tab-content">
            <ul class="swui-tab-nav">
                <li class="swui-this"><i class="fa fa-picture-o fa-fw"></i>背景</li>
                <li><i class="fa fa-paw fa-fw"></i>颜色</li>
                <li><i class="fa fa-lock fa-fw"></i>锁屏界面</li>
                <li><i class="fa fa-windows fa-fw"></i>开始</li>
                <li><i class="fa fa-tasks fa-fw"></i>任务栏</li>
            </ul>
        </div>
    </div>
    <div class="swui-tab-right">
        <div class="swui-scroll-y">
            <div class="swui-tab-content">
                <h1>预览</h1>
                <div class="background-preview">
                    <div class="preview-start">
                        <ul class="preview-menu">
                            <li><div class="preview-menu-text title"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text short"></div></li>
                            <li><div class="preview-menu-icon"></div><div class="preview-menu-text"></div></li>
                        </ul>
                        <div class="preview-tilebox">
                            <div class="title"></div>
                            <div class="s4x4"></div>
                            <div class="s2x2"></div>
                            <div class="s2x2"></div>

                            <div class="s2x1"></div>
                            <div class="s4x1"></div>

                            <div class="s4x2"></div>
                            <div class="s1x1"></div>
                            <div class="s1x1"></div>
                            <div class="s1x1"></div>
                            <div class="s1x1"></div>

                            <div class="s2x2"></div>
                            <div class="s2x2"></div>
                            <div class="s2x2"></div>
                        </div>
                        <div class="preview-tilebox preview-tilebox-lg">
                            <div class="title"></div>
                            <div class="s4x4"></div>
                            <div class="s2x2"></div>
                            <div class="s2x2"></div>
                            <div class="s2x2"></div>
                            <div class="s2x2"></div>

                            <div class="s4x2"></div>
                            <div class="s4x2"></div>

                            <div class="s2x1"></div>
                            <div class="s1x1"></div>
                            <div class="s1x1"></div>
                            <div class="s2x1"></div>
                            <div class="s2x1"></div>

                            <div class="s2x2"></div>
                            <div class="s2x2"></div>
                            <div class="s4x2"></div>
                        </div>
                    </div>
                    <div class="preview-window">
                        <div class="preview-window-title"><p></p></div>
                        <span>示例文本</span>
                    </div>
                    <div class="preview-taskbar"></div>
                </div>
                <!-- 背景设置 -->
                <div class="swui-tab-item layui-show">
                    <h2>选择图片</h2>
                    <div class="background-choose">
                        <img src="images/bg_01.jpg" />
                        <img src="images/bg_02.jpg" />
                        <img src="images/bg_03.jpg" />
                        <img src="images/bg_04.jpg" />
                        <img src="images/bg_05.jpg" />
                    </div>
                    <!-- 上传图片 -->
                    <input type="file" name="file" class="layui-upload-file" style="display:none;">
                    <div class="background-upload">
                        浏览
                    </div>
                    <div style="color:#ff6a00;margin-top:50px;">Tips：主题的相关设置存储于本地，下次打开可直接使用</div>
                </div>
                <!-- 颜色设置 -->
                <div class="swui-tab-item">
                    <h2>主题色</h2>
                    <div class="color-choose">
                        <div class="theme-color-11" title="黄金色"></div>
                        <div class="theme-color-12" title="金色"></div>
                        <div class="theme-color-13" title="亮橙黄色"></div>
                        <div class="theme-color-14" title="深橙黄色"></div>
                        <div class="theme-color-15" title="铁锈色"></div>
                        <div class="theme-color-16" title="浅铁锈色"></div>
                        <div class="theme-color-17" title="砖红色"></div>
                        <div class="theme-color-18" title="中等红色"></div>
                        <div class="theme-color-21" title="浅红色"></div>
                        <div class="theme-color-22" title="红色"></div>
                        <div class="theme-color-23" title="亮玫红"></div>
                        <div class="theme-color-24" title="玫瑰红"></div>
                        <div class="theme-color-25" title="浅紫红色"></div>
                        <div class="theme-color-26" title="紫红色"></div>
                        <div class="theme-color-27" title="浅兰花紫"></div>
                        <div class="theme-color-28" title="兰花紫"></div>
                        <div class="theme-color-31" title="默认蓝色"></div>
                        <div class="theme-color-32" title="深蓝色"></div>
                        <div class="theme-color-33" title="紫影色"></div>
                        <div class="theme-color-34" title="深紫影色"></div>
                        <div class="theme-color-35" title="柔和彩虹色"></div>
                        <div class="theme-color-36" title="鸢尾花色"></div>
                        <div class="theme-color-37" title="浅紫色"></div>
                        <div class="theme-color-38" title="紫色"></div>
                        <div class="theme-color-41" title="亮酷蓝色"></div>
                        <div class="theme-color-42" title="酷蓝色"></div>
                        <div class="theme-color-43" title="海沫绿"></div>
                        <div class="theme-color-44" title="蓝绿色"></div>
                        <div class="theme-color-45" title="浅薄荷色"></div>
                        <div class="theme-color-46" title="深薄荷色"></div>
                        <div class="theme-color-47" title="草皮绿"></div>
                        <div class="theme-color-48" title="运动绿"></div>
                        <div class="theme-color-51" title="灰色"></div>
                        <div class="theme-color-52" title="灰棕色"></div>
                        <div class="theme-color-53" title="钢蓝色"></div>
                        <div class="theme-color-54" title="金属蓝色"></div>
                        <div class="theme-color-55" title="浅苔藓色"></div>
                        <div class="theme-color-56" title="苔藓色"></div>
                        <div class="theme-color-57" title="草坪绿色"></div>
                        <div class="theme-color-58" title="绿色"></div>
                        <div class="theme-color-new" title="自定义颜色">+</div>
                        <div class="theme-custom layui-hide">
                        </div>
                    </div>
                    <h2>在"开始"菜单、任务栏和操作中心显示主题色（未实现）</h2>
                    <div class="layui-form swui-switch">
                        <input type="checkbox" lay-filter="toggleTransparent" lay-skin="switch" checked><span style="margin-left:15px; vertical-align:middle">开</span>
                    </div>
                    <h2>在标题栏显示主题色（未实现）</h2>
                    <div class="layui-form swui-switch">
                        <input type="checkbox" lay-filter="toggleTransparent" lay-skin="switch" checked><span style="margin-left:15px; vertical-align:middle">开</span>
                    </div>
                    <div style="color:#ff6a00;margin-top:20px;">Tips：5排8列主题色尽情享用</div>
                </div>
                <!-- 锁屏界面 -->
                <div class="swui-tab-item">
                    <h1>预览</h1>
                    <div class="lockscreen-preview">
                        <div class="lockscreen-preview-time"></div>
                    </div>
                    <h2>选择图片</h2>
                    <div class="lockscreen-choose">
                        <img src="images/bg_01.jpg" />
                        <img src="images/bg_02.jpg" />
                        <img src="images/bg_03.jpg" />
                        <img src="images/bg_04.jpg" />
                        <img src="images/bg_05.jpg" />
                    </div>
                    <!-- 上传图片 -->
                    <input type="file" name="file" class="layui-upload-file" style="display:none;">
                    <div class="lockscreen-upload">
                        浏览
                    </div>
                    <div style="color:#ff6a00;margin-top:20px;">Tips：锁屏功能暂未实现</div>
                </div>
                <!-- 开始 -->
                <div class="swui-tab-item">
                    <h2>使用全屏幕"开始"菜单（未实现）</h2>
                    <div class="layui-form swui-switch">
                        <input type="checkbox" lay-filter="toggle" lay-skin="switch"><span style="margin-left:15px; vertical-align:middle">关</span>
                    </div>
                    <h2>开始菜单尺寸</h2>
                    <div class="layui-form swui-radio start-size">
                        <input type="radio" name="startsize" value="xs" title="迷你" lay-filter="startSize">
                        <input type="radio" name="startsize" value="sm" title="中等" lay-filter="startSize">
                        <input type="radio" name="startsize" value="lg" title="宽敞" lay-filter="startSize">
                    </div>
                    <div style="color:#ff6a00;margin-top:20px;">Tips：迷你不显示磁贴，中等显示一列磁贴，宽敞显示两列磁贴</div>
                </div>
                <!-- 任务栏 -->
                <div class="swui-tab-item">
                    <h1>任务栏</h1>
                    <h2 style="margin-top:0;">自动隐藏任务栏</h2>
                    <div class="layui-form swui-switch">
                        <input type="checkbox" lay-filter="toggleTaskbar" lay-skin="switch"><span style="margin-left:15px; vertical-align:middle">关</span>
                    </div>
                    <h2>任务栏在屏幕上的位置</h2>
                    <div class="layui-form swui-radio taskbar-position">
                        <input type="radio" name="position" value="top" title="顶部" lay-filter="taskPosition">
                        <input type="radio" name="position" value="bottom" title="底部" lay-filter="taskPosition">
                        <input type="radio" name="position" value="left" title="靠左" lay-filter="taskPosition">
                        <input type="radio" name="position" value="right" title="靠右" lay-filter="taskPosition">
                    </div>
                    <div class="layui-form">
                        <input type="checkbox" lay-filter="taskbarMode" lay-skin="btns" lay-text="顶部|底部|靠左|靠右" lay-single lay-value="top|bottom|left|right">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./swuiadmin/swui/js/theme.js"></script>